[V0_FILE]typescriptreact:file="tailwind.config.ts" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, fontFamily: { serif: ["var(--font-playfair)", "serif"], }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0", }, to: { height: "var(--radix-accordion-content-height)", }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)", }, to: { height: "0", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [], } export default config [V0_FILE]xml:file="public/robably-logo.svg" isMerged="true" [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; /* Updated CSS variables for black background and white text */ :root { --foreground-rgb: 255, 255, 255; --background-rgb: 0, 0, 0; --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 0%; --card-foreground: 0 0% 100%; --popover: 0 0% 0%; --popover-foreground: 0 0% 100%; --primary: 0 0% 100%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 100%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 100%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 0%; --sidebar-foreground: 0 0% 100%; --sidebar-primary: 0 0% 100%; --sidebar-primary-foreground: 0 0% 0%; --sidebar-accent: 0 0% 14.9%; --sidebar-accent-foreground: 0 0% 100%; --sidebar-border: 0 0% 14.9%; --sidebar-ring: 217.2 91.2% 59.8%; } /* Removed dark mode variables since we're using black as default */ body { color: rgb(var(--foreground-rgb)); background: rgb(var(--background-rgb)); /* Updated to use galix-mono font */ font-family: "galix-mono", sans-serif; font-weight: 400; font-style: normal; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Removed font-serif class since we're not using Merriweather anymore */ [V0_FILE]png:file="public/favicon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/green-fav-l57euy6OuJ2YPGM2marJISlzBWN1kz.png" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import "./globals.css" export const metadata = { title: "Rob's Site", description: "Personal website of Rob Figueredo", icons: { icon: [ { url: "/favicon.png", type: "image/svg+xml", }, ], }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import Link from "next/link" import Image from "next/image" export default function Home() { const [copied, setCopied] = useState(false) const email = "robdaniels.design@gmail.com" const [isMobile, setIsMobile] = useState(false) const [showScreensaver, setShowScreensaver] = useState(false) const [logoPosition, setLogoPosition] = useState({ x: 20, y: 20 }) const [logoVelocity, setLogoVelocity] = useState({ x: 5.5, y: 5.5 }) const [logoColor, setLogoColor] = useState("#00FFB2") const [colorIndex, setColorIndex] = useState(0) const idleTimerRef = useRef(null) const animationRef = useRef(null) const lastActivityRef = useRef(Date.now()) const neonColors = ["#FF0000", "#FFDD00", "#00FBFF", "#FF00E1"] useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth <= 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) useEffect(() => { const resetIdleTimer = () => { lastActivityRef.current = Date.now() setShowScreensaver(false) if (idleTimerRef.current) { clearTimeout(idleTimerRef.current) } if (animationRef.current) { cancelAnimationFrame(animationRef.current) } idleTimerRef.current = setTimeout(() => { setShowScreensaver(true) setLogoPosition({ x: 20, y: 20 }) setLogoColor("#00FFB2") setColorIndex(0) setLogoVelocity({ x: 5.5, y: 5.5 }) }, 9000) } const handleActivity = () => { resetIdleTimer() } window.addEventListener("mousemove", handleActivity) window.addEventListener("keydown", handleActivity) window.addEventListener("scroll", handleActivity) window.addEventListener("click", handleActivity) resetIdleTimer() return () => { window.removeEventListener("mousemove", handleActivity) window.removeEventListener("keydown", handleActivity) window.removeEventListener("scroll", handleActivity) window.removeEventListener("click", handleActivity) if (idleTimerRef.current) { clearTimeout(idleTimerRef.current) } if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, []) useEffect(() => { if (!showScreensaver) return const animate = () => { setLogoPosition((prev) => { const newX = prev.x + logoVelocity.x const newY = prev.y + logoVelocity.y let newVelX = logoVelocity.x let newVelY = logoVelocity.y let shouldChangeColor = false if (newX <= 0 || newX >= window.innerWidth - 80) { newVelX = -logoVelocity.x shouldChangeColor = true } if (newY <= 0 || newY >= window.innerHeight - 80) { newVelY = -logoVelocity.y shouldChangeColor = true } if (shouldChangeColor) { setColorIndex((prevIndex) => { const nextIndex = (prevIndex + 1) % neonColors.length setLogoColor(neonColors[nextIndex]) return nextIndex }) setLogoVelocity({ x: newVelX, y: newVelY }) } return { x: Math.max(0, Math.min(window.innerWidth - 80, newX)), y: Math.max(0, Math.min(window.innerHeight - 80, newY)), } }) animationRef.current = requestAnimationFrame(animate) } animationRef.current = requestAnimationFrame(animate) return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [showScreensaver, logoVelocity, neonColors]) const copyToClipboard = () => { navigator.clipboard.writeText(email).then(() => { setCopied(true) setTimeout(() => setCopied(false), 2000) }) } return (

{showScreensaver && (

)}

This page

intentionally

left blank

Rob Figueredo

Web Designer + Vibe Coder

[harvest] [x] [v0]

) } function getColorFilter(hexColor: string): string { const r = Number.parseInt(hexColor.slice(1, 3), 16) const g = Number.parseInt(hexColor.slice(3, 5), 16) const b = Number.parseInt(hexColor.slice(5, 7), 16) if (hexColor === "#FF0000") return "invert(13%) sepia(100%) saturate(7500%) hue-rotate(0deg)" if (hexColor === "#FFDD00") return "invert(85%) sepia(100%) saturate(1000%) hue-rotate(15deg)" if (hexColor === "#00FBFF") return "invert(85%) sepia(100%) saturate(1000%) hue-rotate(180deg)" if (hexColor === "#FF00E1") return "invert(13%) sepia(100%) saturate(7500%) hue-rotate(300deg)" if (hexColor === "#00FFB2") return "invert(85%) sepia(100%) saturate(1000%) hue-rotate(150deg)" return "invert(1)" }

About

Tags

Share

More from robdanielsdc

More Templates Like This

About

Tags

Share

About

Tags

Share

More from robdanielsdc

More Templates Like This